<template>
  <div class="app-container fix-navbar-overlay">
    <NavBar>
      <template #left> 微信 </template>
      <template #right>
        <img
          @click="handleFindIconClick"
          src="/images/icon/find.svg"
          alt=""
        />
        <img
          @click="handlePlusIconClick"
          src="/images/icon/plus.svg"
          alt=""
        />
      </template>
    </NavBar>

    <CellGroup>
      <Cell
        v-for="user in friends"
        :key="user.userId"
        :to="{
          path: '/chat/chat-room',
          query: {
            recieverId: user.userId,
            receiverName: user.username,
          },
        }"
      >
        <template #left>
          <img
            src="/images/mock/sedationh.jpg"
            alt=""
            class="avator"
          />
        </template>
        <div class="default">
          <span>{{ user.username }}</span>
          <span>进入查看消息</span>
        </div>
        <template #right>
          <span class="tip">刚刚</span>
        </template>
      </Cell>

      <Cell
        to="/chat/chat-room"
        v-for="(i, index) in mockChats"
        :key="i.name + index"
      >
        <template #left>
          <img :src="i.img" alt="" class="avator" />
        </template>
        <div class="default">
          <span>{{ i.name }}</span>
          <span>{{ i.wenzi }}</span>
        </div>
        <template #right>
          <span class="tip">{{ i.time }}</span>
        </template>
      </Cell>

      <Cell
        to="/chat/chat-room"
        v-for="(i, index) in mockChats"
        :key="i.name + index + 2"
      >
        <template #left>
          <img :src="i.img" alt="" class="avator" />
        </template>
        <div class="default">
          <span>{{ i.name }}</span>
          <span>{{ i.wenzi }}</span>
        </div>
        <template #right>
          <span class="tip">{{ i.time }}</span>
        </template>
      </Cell>
    </CellGroup>
  </div>
</template>

<script>
import NavBar from "src/components/NavBar.vue"
export default {
  data: function () {
    return {
      mockChats: [
        {
          img: "/images/mock/head1.svg",
          name: "订阅号消息",
          wenzi: "[8条]云技术：一断网才想起来......",
          time: "19:55",
        },
        {
          img: "/images/mock/head2.svg",
          name: "微信运动",
          wenzi: "[应用消息]",
          time: "13:19",
        },
        {
          img: "/images/mock/head3.svg",
          name: "Axure中文网",
          wenzi: "[Axure原型赏析]第38期 高保真微信原型",
          time: "10:19",
        },
        {
          img: "/images/mock/head4.png",
          name: "Axure技术交流群",
          wenzi: "李工：动态面板基本使用分享......",
          time: "昨天",
        },
        {
          img: "/images/mock/head5.svg",
          name: "梨花朵朵",
          wenzi: "哈哈",
          time: "昨天",
        },
        {
          img: "/images/mock/head6.svg",
          name: "一只海豚",
          wenzi: "谢谢",
          time: "昨天",
        },
        {
          img: "/images/mock/head7.svg",
          name: "昭武",
          wenzi: "你好，在吗？",
          time: "昨天",
        },
        {
          img: "/images/mock/head8.svg",
          name: "在云间",
          wenzi: "非常感谢",
          time: "周四",
        },
        {
          img: "/images/mock/head9.svg",
          name: "云中",
          wenzi: "你好！",
          time: "周四",
        },
      ],
      friends: [],
    }
  },
  components: {
    NavBar,
  },
  async created() {
    const user = await this.$axios.get("/user", {
      params: {
        _id: this.$global.state.userId,
      },
    })
    this.friends = user.friends.map((user) => ({
      username: user.username,
      userId: user._id,
    }))
    console.log(this.friends)
  },
  methods: {
    handleFindIconClick() {
      console.log("find icon click")
    },
    handlePlusIconClick() {
      // console.log("plus icon click")
      this.$router.push("/chat/Add")
    },
  },
}
</script>

<style lang="scss" scoped>
.avator {
  width: 45px;
  border-radius: 5px;
}

.default {
  display: flex;
  flex-direction: column;

  span:first-child {
    color: #333333;
    font-size: 16px;
  }

  span:last-child {
    color: $font-color;
    font-size: 14px;
  }
}

.tip {
  font-size: 12px;
  color: $font-color;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
